<script setup lang='ts' >
import { ref, defineProps } from 'vue';
import PictureRecognitionInfo  from '/@/components/AlgorithmRecognition/PictureRecognitionInfo.vue'
const pathData = ref(import.meta.env.VITE_API_URL) // 获取地址
const props = defineProps<{
    options: any
}>()
const cover = 'cover'
const imgPath = ref('')
const innerVisible = ref(false)
/*** playClick 查看大图 */
const playClick = (val:any) => {
    imgPath.value = val
    innerVisible.value = true
}
let srcList:any = []
/*** lookImg 查看图片 */
const lookImg = (val:any) => {
    srcList = []
    srcList.push(val.v_FilePath)
}
</script>
<template>
<el-row class="w-h-100">
   <template v-for="item in props.options" :key="item.props">
        <div class="pictureInfo">
                <p style="width: 50%;height: 170px;">
                    <el-image  style="width: 100%;height: 170px;cursor:pointer;border: 1px solid rgba(0,255,253,0.4);" @click="playClick(pathData + item.v_FilePath)"  :src="pathData + item.v_FilePath" />
                    <!-- <el-icon size="20px" @click="playClick(pathData + item.v_FilePath)" class="fullScreen"><FullScreen /></el-icon> -->
                    <p class="d_time">{{ item.d_CreateTime }}</p>
                </p>
                <p style="width: 50%;height: 170px;">
                    <picture-recognition-info style="width: 100%;height: 170px;" :textType="item.v_AlgorithmResolveFlag" :option="item.v_ResolveResult"/>
                </p>
        </div>
   </template>
   <el-dialog
        v-model="innerVisible"
        width="50%"
        :title="$t('ipKei9bUxFkLbZvSTPp')"
        append-to-body
    >
        <el-image :fit="cover" style="width: 100%;cursor:pointer;" @click="lookImg(imgPath)" :preview-src-list="[imgPath]" :src="imgPath">
            <template #placeholder>
                <div v-loading="true" style="width: 100%; height: 100%;"></div>
            </template>
        </el-image>
    </el-dialog>
</el-row>
</template>
<style lang="scss" scoped>
*{
    box-sizing: border-box;
}

::v-deep .el-image-viewer__btn, .el-image-viewer__close{
    background-color: rgba($color: #fff, $alpha: 0.5);
}

.pictureInfo{
    display: flex;
    justify-content: space-around;
    margin: 2px auto;
    // margin: 6px;
    width: 90%;
    height: 170px;
    background: rgba(0,0,0,0.4);
   p{
        &:nth-child(1){
            position: relative;
            .d_time{
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 31px;
                line-height: 31px;
                text-align: center;
                background: rgba(2,32,34,0.6);
                backdrop-filter: blur(1px);
            }
        }
   }
}


</style>